<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 7.1</title>
</head>
<body>
    <canvas id="circuitCanvas" width="550" height="400"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // Helper function to draw a lamp (circle with a cross)
        function drawLamp(cx, cy, radius) {
            ctx.beginPath();
            ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
            ctx.stroke();
            ctx.beginPath();
            const d = radius / Math.sqrt(2);
            ctx.moveTo(cx - d, cy - d);
            ctx.lineTo(cx + d, cy + d);
            ctx.moveTo(cx + d, cy - d);
            ctx.lineTo(cx - d, cy + d);
            ctx.stroke();
        }

        // Helper function to draw a junction point
        function drawJunction(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 4, 0, 2 * Math.PI, false);
            ctx.fill();
        }

        // --- Main Drawing ---

        // Define coordinates
        const y_top = 100;
        const y_lamp_top = 200;
        const y_lamp_bot = 260;
        const y_bot_path_mid = (y_lamp_top + y_lamp_bot) / 2; // 230

        const x_left = 100;
        const x_lamp_block_left = 150;
        const x_lamp_block_right = 220;
        const x_resistor_start = 250;
        const x_resistor_end = 330;
        const x_ammeter_center = 380;
        const x_switch_start = 350;
        const x_switch_end = 400;
        const x_batt_neg_side = 130;
        const x_batt_pos_side = 230;


        // 1. Draw Wires
        ctx.beginPath();
        // Top wire
        ctx.moveTo(x_batt_pos_side, y_top);
        ctx.lineTo(x_switch_start, y_top);
        // Wire from switch, around corner, to ammeter
        ctx.moveTo(x_switch_end, y_top);
        ctx.lineTo(430, y_top);
        ctx.lineTo(430, y_bot_path_mid - 25); // To ammeter top
        // Wire from ammeter to resistor
        ctx.moveTo(430, y_bot_path_mid + 25); // From ammeter bottom
        ctx.lineTo(430, y_bot_path_mid);
        ctx.lineTo(x_resistor_end, y_bot_path_mid);
        // Wire from resistor to parallel block
        ctx.moveTo(x_resistor_start, y_bot_path_mid);
        ctx.lineTo(x_lamp_block_right, y_bot_path_mid);
        // Parallel block wiring
        // Top branch
        ctx.moveTo(x_lamp_block_right, y_bot_path_mid);
        ctx.lineTo(x_lamp_block_right, y_lamp_top);
        ctx.lineTo(x_lamp_block_left, y_lamp_top);
        ctx.lineTo(x_lamp_block_left, y_bot_path_mid);
        // Bottom branch
        ctx.moveTo(x_lamp_block_right, y_bot_path_mid);
        ctx.lineTo(x_lamp_block_right, y_lamp_bot);
        ctx.lineTo(x_lamp_block_left, y_lamp_bot);
        ctx.lineTo(x_lamp_block_left, y_bot_path_mid);
        // Wire from parallel block, around corner, to battery
        ctx.moveTo(x_lamp_block_left, y_bot_path_mid);
        ctx.lineTo(x_left, y_bot_path_mid);
        ctx.lineTo(x_left, y_top);
        ctx.lineTo(x_batt_neg_side, y_top);
        ctx.stroke();

        // 2. Draw Battery
        const cell_h = 25;
        // Cell 1
        ctx.beginPath();
        ctx.moveTo(x_batt_neg_side + 20, y_top - cell_h / 2); // short line
        ctx.lineTo(x_batt_neg_side + 20, y_top + cell_h / 2);
        ctx.moveTo(x_batt_neg_side + 40, y_top - cell_h); // long line
        ctx.lineTo(x_batt_neg_side + 40, y_top + cell_h);
        ctx.stroke();
        // Dashed line
        ctx.beginPath();
        ctx.setLineDash([5, 3]);
        ctx.moveTo(x_batt_neg_side + 40, y_top);
        ctx.lineTo(x_batt_neg_side + 70, y_top);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line
        // Cell 2
        ctx.beginPath();
        ctx.moveTo(x_batt_neg_side + 70, y_top - cell_h / 2); // short line
        ctx.lineTo(x_batt_neg_side + 70, y_top + cell_h / 2);
        ctx.moveTo(x_batt_neg_side + 90, y_top - cell_h); // long line
        ctx.lineTo(x_batt_neg_side + 90, y_top + cell_h);
        ctx.stroke();
        
        // 3. Draw Switch
        ctx.beginPath();
        ctx.arc(x_switch_start, y_top, 4, 0, 2 * Math.PI); // Contact 1
        ctx.fill();
        ctx.beginPath();
        ctx.arc(x_switch_end, y_top, 4, 0, 2 * Math.PI); // Contact 2
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(x_switch_start, y_top);
        ctx.lineTo(x_switch_end, y_top - 20); // Open arm
        ctx.stroke();

        // 4. Draw Ammeter
        const ammeter_radius = 25;
        ctx.beginPath();
        ctx.arc(x_ammeter_center + 50, y_bot_path_mid, ammeter_radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.font = 'bold 24px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('A', x_ammeter_center + 50, y_bot_path_mid);
        
        // 5. Draw Resistor Q
        const resistor_h = 20;
        ctx.strokeRect(x_resistor_start, y_bot_path_mid - resistor_h / 2, x_resistor_end - x_resistor_start, resistor_h);
        ctx.font = 'bold 20px Arial';
        ctx.fillText('Q', (x_resistor_start + x_resistor_end) / 2, y_bot_path_mid - resistor_h);

        // 6. Draw Lamps
        const lamp_radius = 20;
        const lamp_cx = (x_lamp_block_left + x_lamp_block_right) / 2;
        drawLamp(lamp_cx, y_lamp_top, lamp_radius);
        drawLamp(lamp_cx, y_lamp_bot, lamp_radius);
        
        // 7. Draw Junctions
        drawJunction(x_lamp_block_left, y_bot_path_mid);
        drawJunction(x_lamp_block_right, y_bot_path_mid);
        
        // 8. Draw Caption
        ctx.font = '20px Arial';
        ctx.fillText('Fig. 7.1', canvas.width / 2, 380);
    </script>
</body>
</html>